<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>干线协调优化平台 - 通用背景组件</title>
    <link rel="stylesheet" href="../libs/fontawesome/6.7.2/css/all.min.css">
    <link rel="stylesheet" href="../common/base.css">
    <link rel="stylesheet" href="./bg1.css">
</head>
<body>
    <div class="page-container">
        <!-- 页面标题 -->
        <header class="page-header">
            <h1 class="page-title">
                <i class="fas fa-palette"></i>
                通用背景组件库
            </h1>
            <p class="page-subtitle">干线协调优化平台 - 科技感背景样式集合</p>
        </header>

        <!-- 背景样式展示区域 -->
        <div class="bg-showcase">
            <!-- 主要背景样式 -->
            <section class="bg-section">
                <h2 class="section-title">
                    <i class="fas fa-desktop"></i>
                    主要背景样式
                </h2>
                
                <div class="bg-grid">
                    <!-- 深色渐变背景 -->
                    <div class="bg-demo-card">
                        <div class="bg-preview bg-dark-gradient">
                            <div class="bg-overlay">
                                <h3>深色渐变</h3>
                                <p>默认大屏背景</p>
                            </div>
                        </div>
                        <div class="bg-info">
                            <h4>bg-dark-gradient</h4>
                            <p>深海蓝到深灰的渐变背景，适用于主要大屏界面</p>
                        </div>
                    </div>

                    <!-- 科技网格背景 -->
                    <div class="bg-demo-card">
                        <div class="bg-preview bg-tech-grid">
                            <div class="bg-overlay">
                                <h3>科技网格</h3>
                                <p>网格纹理背景</p>
                            </div>
                        </div>
                        <div class="bg-info">
                            <h4>bg-tech-grid</h4>
                            <p>带网格纹理的科技感背景，适用于数据密集型界面</p>
                        </div>
                    </div>

                    <!-- 星空背景 -->
                    <div class="bg-demo-card">
                        <div class="bg-preview bg-starfield">
                            <div class="bg-overlay">
                                <h3>星空背景</h3>
                                <p>动态星空效果</p>
                            </div>
                        </div>
                        <div class="bg-info">
                            <h4>bg-starfield</h4>
                            <p>动态星空背景，适用于监控中心或重要展示页面</p>
                        </div>
                    </div>

                    <!-- 地图底色 -->
                    <div class="bg-demo-card">
                        <div class="bg-preview bg-map-base">
                            <div class="bg-overlay">
                                <h3>地图底色</h3>
                                <p>地图容器背景</p>
                            </div>
                        </div>
                        <div class="bg-info">
                            <h4>bg-map-base</h4>
                            <p>专用于地图容器的深色背景</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 辅助背景样式 -->
            <section class="bg-section">
                <h2 class="section-title">
                    <i class="fas fa-layer-group"></i>
                    辅助背景样式
                </h2>
                
                <div class="bg-grid">
                    <!-- 毛玻璃背景 -->
                    <div class="bg-demo-card">
                        <div class="bg-preview bg-glass">
                            <div class="bg-overlay">
                                <h3>毛玻璃</h3>
                                <p>模糊透明效果</p>
                            </div>
                        </div>
                        <div class="bg-info">
                            <h4>bg-glass</h4>
                            <p>毛玻璃效果背景，适用于浮动面板和弹窗</p>
                        </div>
                    </div>

                    <!-- 卡片背景 -->
                    <div class="bg-demo-card">
                        <div class="bg-preview bg-card">
                            <div class="bg-overlay">
                                <h3>卡片背景</h3>
                                <p>内容容器背景</p>
                            </div>
                        </div>
                        <div class="bg-info">
                            <h4>bg-card</h4>
                            <p>半透明卡片背景，适用于内容区域</p>
                        </div>
                    </div>

                    <!-- 纯色背景 -->
                    <div class="bg-demo-card">
                        <div class="bg-preview bg-solid">
                            <div class="bg-overlay">
                                <h3>纯色背景</h3>
                                <p>简洁纯色</p>
                            </div>
                        </div>
                        <div class="bg-info">
                            <h4>bg-solid</h4>
                            <p>纯色深色背景，适用于简洁界面</p>
                        </div>
                    </div>

                    <!-- 渐变边框背景 -->
                    <div class="bg-demo-card">
                        <div class="bg-preview bg-gradient-border">
                            <div class="bg-overlay">
                                <h3>渐变边框</h3>
                                <p>霓虹边框效果</p>
                            </div>
                        </div>
                        <div class="bg-info">
                            <h4>bg-gradient-border</h4>
                            <p>带霓虹渐变边框的背景，适用于重要组件</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 特效背景样式 -->
            <section class="bg-section">
                <h2 class="section-title">
                    <i class="fas fa-magic"></i>
                    特效背景样式
                </h2>
                
                <div class="bg-grid">
                    <!-- 动态粒子背景 -->
                    <div class="bg-demo-card">
                        <div class="bg-preview bg-particles">
                            <div class="bg-overlay">
                                <h3>动态粒子</h3>
                                <p>粒子流动效果</p>
                            </div>
                        </div>
                        <div class="bg-info">
                            <h4>bg-particles</h4>
                            <p>动态粒子效果背景，适用于科技感强的界面</p>
                        </div>
                    </div>

                    <!-- 数据流背景 -->
                    <div class="bg-demo-card">
                        <div class="bg-preview bg-data-stream">
                            <div class="bg-overlay">
                                <h3>数据流</h3>
                                <p>代码雨效果</p>
                            </div>
                        </div>
                        <div class="bg-info">
                            <h4>bg-data-stream</h4>
                            <p>数据流动效果背景，适用于数据处理界面</p>
                        </div>
                    </div>

                    <!-- 霓虹光效背景 -->
                    <div class="bg-demo-card">
                        <div class="bg-preview bg-neon-glow">
                            <div class="bg-overlay">
                                <h3>霓虹光效</h3>
                                <p>发光边缘效果</p>
                            </div>
                        </div>
                        <div class="bg-info">
                            <h4>bg-neon-glow</h4>
                            <p>霓虹发光效果背景，适用于突出显示的区域</p>
                        </div>
                    </div>

                    <!-- 电路板背景 -->
                    <div class="bg-demo-card">
                        <div class="bg-preview bg-circuit">
                            <div class="bg-overlay">
                                <h3>电路板</h3>
                                <p>电路纹理效果</p>
                            </div>
                        </div>
                        <div class="bg-info">
                            <h4>bg-circuit</h4>
                            <p>电路板纹理背景，适用于技术相关界面</p>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <!-- 使用说明 -->
        <section class="usage-section">
            <h2 class="section-title">
                <i class="fas fa-code"></i>
                使用说明
            </h2>
            <div class="usage-content">
                <div class="usage-item">
                    <h3>基础用法</h3>
                    <code>&lt;div class="bg-dark-gradient"&gt;您的内容&lt;/div&gt;</code>
                </div>
                <div class="usage-item">
                    <h3>组合使用</h3>
                    <code>&lt;div class="bg-starfield bg-glass"&gt;组合效果&lt;/div&gt;</code>
                </div>
                <div class="usage-item">
                    <h3>全屏背景</h3>
                    <code>&lt;body class="bg-dark-gradient"&gt;...&lt;/body&gt;</code>
                </div>
            </div>
        </section>
    </div>
</body>
</html>